<template>
  <div class="service">
    <div class="head">
      <div class="nav1">
        <router-link to="/index">首页</router-link>&gt;
        <a href="">大众服务</a>&gt; 注射疫苗
      </div>
      <div class="nav2">
        <div class="nav2-1">患者服务</div>
        <div class="nav2-2">用最真诚的服务态度，专业的药疗技术，为您服务</div>
      </div>
      <div class="lunbo">
        <div class="btn1">&lt;</div>
        <div class="swiperbox">
          <div class="swiper">
            <div>
              <img src="/img/servicepic/8.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/9.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/10.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/11.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/12.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/1.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/2.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/3.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/4.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/5.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/6.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/7.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/8.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/9.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/10.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/11.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/12.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/1.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/2.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/3.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/4.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/5.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/6.png" alt="" />
            </div>
            <div>
              <img src="/img/servicepic/7.png" alt="" />
            </div>
          </div>
        </div>

        <div class="btn2">&gt;</div>
      </div>
    </div>
    <div class="article">
      <div class="box1">
        <div>华西校区</div>
        <div>温江院区</div>
        <div>省五院区</div>
        <div>芳草门诊</div>
      </div>
      <div class="box2">
        <div>全部</div>
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
        <div>F</div>
        <div>G</div>
        <div>H</div>
        <div>I</div>
        <div>J</div>
        <div>K</div>
        <div>L</div>
        <div>M</div>
        <div>N</div>
        <div>O</div>
        <div>P</div>
        <div>Q</div>
        <div>R</div>
        <div>S</div>
        <div>T</div>
        <div>U</div>
        <div>V</div>
        <div>W</div>
        <div>X</div>
        <div>Y</div>
        <div>Z</div>
      </div>
      <div class="box3">
        <div class="list">
          <div></div>
          <span>暂无科室</span>
        </div>
        <div class="list">
          <div></div>
          <span>暂无科室</span>
        </div>
        <div class="list">
          <div></div>
          <span>暂无科室</span>
        </div>
        <div class="list">
          <div></div>
          <span>暂无科室</span>
        </div>
        <div class="list">
          <div></div>
          <span>暂无科室</span>
        </div>
        <div class="list">
          <div></div>
          <span>暂无科室</span>
        </div>
        <div class="list">
          <div></div>
          <span>暂无科室</span>
        </div>
        <div class="list">
          <div></div>
          <span>暂无科室</span>
        </div>
        <div class="list">
          <div></div>
          <span>暂无科室</span>
        </div>
        <div class="list">
          <div></div>
          <span>暂无科室</span>
        </div>
        <div class="list">
          <div></div>
          <span>暂无科室</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
export default {
  mounted() {
    this.warp()
  },
  methods: {
    warp() {
let times;
let time2;
$(".swiper").css({ position: "relative" });
$(".swiper").css("left", "-786.8px");
$(".btn2").click(function () {
  if(times)return
  times =  setTimeout(() => {
      times = null
  }, 500);
  $(".swiper").animate({ left: "-=196.7px" }, 500, function () {
    if ($(".swiper").css("left") == "-2360.4px") {
      $(".swiper").css("left", "0px");
    }
    console.log($(".swiper").css("left"));
  });
});
$(".btn1").click(function () {
  if(time2)return
  time2 =  setTimeout(() => {
      time2 = null
  }, 500);
  $(".swiper").animate({ left: "+=196.7px" }, 500, function () {
    if ($(".swiper").css("left") == "0px") {
    //   console.log($(".swiper").css("left"));
      $(".swiper").css("left", "-2360.4px");
    }
  });
});
    }
  },
};
</script>

<style lang="scss" scoped>
*a {
  text-decoration: none;
  color: #fff;
}
.service .head {
  width: 1820px;
  height: 406px;
  background: url(/img/servicepic/cjwt.jpg);
  margin: 0 auto;
}
.service .head .lunbo {
  width: 1820px;
  margin: 0 auto;
  position: relative;
}
.service .head .lunbo .btn1 {
  position: absolute;
  bottom: 120px;
  left: 250px;
}
.service .head .lunbo .btn2 {
  position: absolute;
  bottom: 120px;
  right: 250px;
}
.service .head .lunbo .swiper {
  margin: 0 auto;
  width: 4720.8px;
  display: flex;
  flex-wrap: nowrap;
}
.swiperbox {
  background-color: "red";
  margin: 0 auto;
  width: 1180px;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  position: relative;
}
.service .head .lunbo .swiper > div img {
  margin: 46px 0;
  width: 196.7px;
  height: 196.6px;
  position: relative;
  left: -196.7px;
}
.service .head .lunbo .btn1,
.service .head .lunbo .btn2 {
  z-index: 10;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #fff;
  font-size: 42px;
  line-height: 38px;
  text-align: center;
  color: #fff;
}
.service .head .lunbo .btn1:hover,
.service .head .lunbo .btn2:hover {
  background: #5a82cf;
  border: 1px solid #5a82cf;
  cursor: pointer;
}
.service .head .nav1 {
  width: 1180px;
  height: 57px;
  margin: 0 auto;
  line-height: 57px;
  font-size: 14px;
  color: #fff;
}
.service .head .nav2 {
  width: 1180px;
  height: 110;
  padding-top: 38px;
  // background: rgba($color: red, $alpha: 0.2);
  margin: 0 auto;
}
.service .head .nav2 .nav2-1 {
  color: #fff;
  text-align: center;
  font-size: 30px;
  margin: 7.5px auto;
}
.service .head .nav2 .nav2-2 {
  font-size: 14px;
  color: #fff;
  text-align: center;
  margin-top: 17px;
}
.service .article {
  width: 1180px;
  margin: 0 auto;
}
.service .article .box1 {
  width: 480px;
  margin: 0 auto;
  margin-top: 65px;
  display: flex;
}
.service .article .box1 > div {
  margin: 10px;
  width: 100px;
  height: 48px;
  text-align: center;
  font-size: 20px;
  line-height: 48px;
  cursor: pointer;
}
.service .article .box1 > div:first-child {
  background: url(/img/servicepic/nav_back.png) no-repeat;
  background-position: bottom center;
}
.service .article .box1 > div:hover {
  background: url(/img/servicepic/nav_back.png) no-repeat;
  background-position: bottom center;
}
.service .article .box2 {
  width: 1180px;
  display: flex;
}
.service .article .box2 > div {
  margin: 7px;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  font-size: 16px;
  color: #000;
  text-align: center;
  line-height: 34px;
}
.service .article .box2 > div:first-child {
  margin-left: 0px;
  width: 48px;
  height: 34px;
  background: #963141;
  color: #fff;
  cursor: pointer;
}
.service .article .box2 > div:hover {
  cursor: pointer;
  background: #963141;
  color: #fff;
}
.service .article .box3 {
  width: 1180px;
  display: flex;
  flex-wrap: wrap;
}
.service .article .box3 .list {
  width: 162px;
  height: 53px;
  padding-left: 46px;
  padding-right: 10px;
  margin-right: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  line-height: 53px;
  border-radius: 10px;
  border: 1px solid #dcdcdc;
}
.service .article .box3 .list > div {
  width: 7px;
  height: 7px;
  background: #c7a368;
  position: absolute;
  left: 30px;
  top: 23px;
}
.service .article .box3 .list:hover {
  background-color: #c7a368;
  color: #fff;
  border: 1px solid #c7a368;
  cursor: pointer;
  & > div {
    background: #fff;
  }
}
</style>